<template>
    <div class="top-title">
      <div class="clearfix top-title">
        <div class="fl go-left clearfix">
          <span class="fl left" v-show="leftIconShow?false:true" @click="onClickLeft">
            <img :src="leftIcon" alt="后退" class="title-icon">
          </span>
          <span class="fl left" v-show="leftTextShow?true:false" @click="onClickLeft">返回</span>
        </div>
        <div class="fl title-center">
          <span>{{Title}}</span>
        </div>
        <div class="fr go-right clearfix">
          <span class="right fr" v-show="rightTextShow?true:false" @click="handlerClick">下一步</span>
          <span class="right fr" v-show="rightIconShow?false:true" @click="handlerckickIcon">
            <img :src="rightIcon" alt="下一步" class="title-icon">
          </span>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name:'topTitle',
  data(){
    return{
      rightTextShow:false,
      rightIconShow:true,
      leftTextShow:false,
      leftIconShow:false,
      leftIcon:require('../../assets/icon/gengduo.png'),
      rightIcon:require('../../assets/icon/next.png'),
    }
  },
  props:['handleNumber','nextPage','propsRightTextShow','propsRightIconShow','propsRightIcon','Title','propsLeftTextShow','propsLeftIconShow','propsLeftIcon'],
  created(){
    this.rightTextShow=this.propsRightTextShow
    this.leftTextShow=this.propsLeftTextShow
    
    this.rightIconShow=this.propsRightIconShow
    this.leftIconShow=this.propsLeftIconShow
    if(this.propsLeftIcon==undefined&&this.propsRightIcon==undefined){
      this.leftIcon=require('../../assets/icon/gengduo.png')
      this.rightIcon=require('../../assets/icon/next.png')
    }else{
      this.leftIcon=this.propsLeftIcon
      this.rightIcon=this.propsRightIcon
    }
    
  },
  methods: {
    onClickLeft() {
      if(this.handleNumber!=0){
        this.$router.go(-1);
      }else{
      }
      this.$emit("listenEverState",true)
    },
    // 下一步
    handlerClick(){
      let next=this.nextPage
      this.$router.push('/'+next)
    },
    handlerckickIcon(){
      let next=this.nextPage
      this.$router.push('/'+next)
    }
  }
}
</script>
<style scoped>
.top-title{
  background-color:#eeeeee;
  height:88px;
  line-height:88px;
  padding: 0 15px;
  box-sizing: border-box;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index: 10;
}
.go-left{
  width:20%;
  font-size:28px;
  height:88px
}
.title-center{
  width:60%;
  text-align: center
}
.go-right{
  width:20%;
  font-size:28px
}
.go-right .right{
  text-align: center;
  width:80px
}
.go-left .left{
  text-align: center;
  width:80px;
  line-height: 88px
}
.title-icon{
  width:40px;
  height:40px;
  vertical-align: middle;
}
</style>
